<template>
<div class="box2">
    <el-form :model="ruleForm" :rules="rules" :inline="false" ref="ruleForm" label-width="200px" class="demo-ruleForm" size="medium">
        <!-- 撤回转让/转移申请/注册商标申请 -->
        <div class="must">
            <el-form-item label="受让人类型：" prop="aassPicType">
                <el-select v-model="ruleForm.aassPicType" placeholder="请选择申请人类型" :style="{width:'80%'}">
                    <el-option v-for="(item,index) in identityOptions" :label="item.title" :key="index" :value="item.value" @click="changedImg"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="ruleForm.aassPicType==9?true:false" class="upload" label="其他有效证件：" prop="OtherAddr">
                <el-input v-model="ruleForm.OtherAddr" style="display:none;"></el-input>
                <div>
                    <upfile :callback="setOther" v-loading="loadOther">
                        <img class="upload-img" :src="OtherLink" v-if="isUpdate&&!changedOther" />
                    </upfile>
                </div>
            </el-form-item>
          <el-form-item prop="IDCAddr" label="身份证照片(正反面)：" v-if="ruleForm.aassPicType==1?true:false">
            <upfile :callback="backCardImage">
              <img :src="mconfig.host + ruleForm.iddbimage" alt="" v-if="isUpdate&&!changedIDC">
            </upfile>
            <span style="color:#f96900">请上传 一张包含身份证正面和反面 的清晰图片(jpg,png格式)，图片大小不能超过1M</span>
            <div class="exam-img">
              <div class="img-inform">
                <img src="../../assets/imgs/inform.png">
                <span>示例:</span>
              </div>
              <examimg :imgType="1"></examimg>
            </div>
          </el-form-item>
            <el-form-item class="upload" v-if="ruleForm.aassPicType==1?true:false" label="身份证照片(正面)：" prop="IDCAddr">
                <el-input v-model="ruleForm.IDCAddr" style="display:none;"></el-input>
                <div>
                    <upfile :callback="setIDC" v-loading="loadIDC">
                        <img class="upload-img" :src="IDCLink" v-if="isUpdate&&!changedIDC" />
                    </upfile>
                    <div class="exam-img">
                        <div class="img-inform">
                            <img src="../../assets/imgs/inform.png">
                            <span>示例:</span>
                        </div>
                        <examimg :imgType="2"></examimg>
                    </div>
                    <span style="color:#f96900">请上传 身份证正反面 清晰图片(jpg,png格式)，图片大小不能超过500k</span>
                </div>
            </el-form-item>
            <el-form-item  class="upload" label="受让人营业执照：" prop="BusinessLicenseAddr">
              <el-input v-model="ruleForm.BusinessLicenseAddr" style="display:none;"></el-input>
              <div>
                <upfile :callback="setBusinessLicense" limit="1" v-loading="loadBusinessLicense">
                  <img class="upload-img" :src="BusinessLicenseLink" v-if="isUpdate&&!changedBusinessLicense" />
                </upfile>
                <div class="exam-img">
                  <div class="img-inform">
                    <img src="../../assets/imgs/inform.png">
                    <span>示例:</span>
                  </div>
                  <examimg :imgType="0"></examimg>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="受让人名称(中文)：" prop="nameValue">
                <el-input v-model="ruleForm.nameValue" placeholder="请填写姓名"></el-input>
                <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <!-- <span>提醒：受让人名称:身份证上的名字</span> -->
                        <span>示例：北京市xxx网络科技有限公司/张三</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="(英文)：" prop="englishValue">
                <el-input v-model="ruleForm.englishValue" placeholder="请填写姓名"></el-input>
            </el-form-item>
            <el-form-item label="受让人地址(中文)：" prop="siteValue">
                <el-input v-model="ruleForm.siteValue" placeholder="请填写地址"></el-input>
                <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>示例：北京市xx区xx街xx号</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="(英文)：" prop="englishSiteValue">
                <el-input v-model="ruleForm.englishSiteValue" placeholder="请填写地址"></el-input>
            </el-form-item>

            <el-form-item label="商标申请号/注册号：" prop="loginNum">
                <el-input v-model="ruleForm.loginNum" placeholder="请填写"></el-input>
            </el-form-item>
            <el-form-item label="原转让申请号：" prop="originNum">
                <el-input v-model="ruleForm.originNum" placeholder="请填写"></el-input>
            </el-form-item>

            <el-form-item class="upload" label="网上确认书：" prop="afterAmount" :rules=" {  required: true,validator:SureImg,trigger: 'change' }" :show-message="!showSureImg">
                <upfile :callback="setSure">
                    <img v-if="ruleForm.imgAddr" :src="ruleForm.imgAddr" alt="">
                </upfile>
                <div class="exam-img">
                    <div class="img-inform">
                        <img src="../../assets/imgs/inform.png">
                        <span>示例:</span>
                    </div>
                    <examimg :imgType="7"></examimg>
                </div>
                <div>
                    <span class="informs">
                        请点此
                        <a :href="mconfig.host + '/file/download?fileType=4'">下载网上确认书</a>,查到相应商标编号并填充
                    </span>
                    <br />
                    <span class="notice">请将下载的网上确认书填写完成, 然后上传JPG文件或是PNG文件</span>
                </div>
            </el-form-item>

            <el-form-item label="其他附件：" prop="dengjichenluofile">
            <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'dengjichenluofile'}" :list="ruleForm.dengjichenluofile"></uploads>
            <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知" />
                <div class="content">
                <span>提示：其他附件</span>
                </div>
            </div>
            </el-form-item>

            <el-form-item label="撤回理由：" prop="reason">
                <el-input type="textarea" v-model="ruleForm.reason" placeholder="请填写撤回理由" :style="{width:'80%'}"></el-input>
            </el-form-item>
            <div class="line"></div>
            <el-form-item label="是否共有商标：" prop>
                <el-radio-group v-model="ruleForm.radio">
                    <el-radio class="input" :label="1">是</el-radio>
                    <el-radio class="input" :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <div v-if="ruleForm.radio==1?true:false" class="common">
                <el-form-item label="其他共有申请人"></el-form-item>

                <el-form-item label="其他转让人：">
                    <both :callback="getBothZ" :append="alterAppendZ" :class_id="$route.query.id"></both>
                </el-form-item>
                <el-form-item label="其他受让人：">
                    <both :callback="getBothS" :append="alterAppendS" :class_id="$route.query.id"></both>
                </el-form-item>

            </div>

            <el-form-item>
                <div class="btns">
                    <el-button type="primary" @click="outStep">上一步</el-button>
                    <el-button type="primary" @click="submitCheck('ruleForm')">提交并审核</el-button>
                </div>
            </el-form-item>
            <el-dialog class="dialog" :show-close="false" :center="true" :visible.sync="dialogVisible" width="460px">
                <!-- :before-close="handleClose" -->
                <div class="hint">
                    <img src="../../assets/imgs/branch.png" alt="提示图片" />
                    <span>选择您想去办理的网点</span>
                </div>
                <el-form-item label="选择网点：" prop="value">
                    <el-select v-model="ruleForm.value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.deptId" :label="item.deptName" :value="item.deptId">
                            <span style="float: left">{{ item.deptName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.address }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <div slot="footer" class="dialog-footer">
                    <el-button type="info" @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog class="hintMsg" :show-close="false" title="温馨提示" :visible.sync="centerDialogVisible" width="462px" @close="skip()">
                <span>您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="skip">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </el-form>
</div>
</template>

<script>
import upfile from "../common/upfile.vue"
import both from "../common/both.vue";
import examimg from "../common/imgExample";
import uploads from "../common/uploads";
export default {
    data() {
        return {
            //添加了共有/受让人，用于验证
            isAdd: false,
            //网点列表
            options: [],
            //提交成功弹出框变量
            centerDialogVisible: false,
            //网点弹出框控制变量
            dialogVisible: false,
            //提交表单
            formData: new FormData(),
            //表单唯一id
            classId: "",
            // 是否修改
            isUpdate: "",
            // 显示图片
            showImg: false,
            // 是否上传商标确认书
            uploadImg: false,

            // 是否加载营业执照
            loadBusinessLicense: "",

            // 是否加载营业执照
            loadOther: "",

            // 是否加载省份证
            loadIDC: "",

            //修改的时候被改动
            changedBusinessLicense: false,

            //修改的时候被改动
            changedOther: false,

            //修改的时候被改动
            changedIDC: false,

            identityOptions: [],

            //填写的信息
            ruleForm: {
                //共有人模板(加到这里为了提供验证)
                common: [],
                commons: [],
                organization: "",
                loginNum: "",
                originNum: "",
                radio: 0,
                reason: "",
                nameValue: "",
                nameValues: "",
                englishValue: "",
                englishValues: "",
                siteValue: "",
                siteValues: "",
                englishSiteValue: "",
                englishSiteValues: "",
                value: "",
                imgAddr: "",
                aassPicType: "", //受让人类别
                BusinessLicenseAddr: "", //受让人营业照
                OtherAddr: "", //受让人其他证件
                IDCAddr: "", //受让人营业照
                BusinessLicense: "", //受让人营业照文件
                Other: "", //受让人其他证件
                IDC: "", //受让人身份证正反面文件
                picdbcard:"", // 身份证正反面
                iddbimage:"", //正反面身份证地址
                dengjichenluofile:[]
            },

            rules: {
                BusinessLicenseAddr: [{
                    required: true,
                    message: "选项不能为空",
                    trigger: "change"
                }, {
                    pattern: /^.{0,255}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
                OtherAddr: [{
                    required: true,
                    message: "选项不能为空",
                    trigger: "change"
                }, {
                    pattern: /^.{0,255}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
                IDCAddr: [{
                    required: true,
                    message: "选项不能为空",
                    trigger: "change"
                }, {
                    pattern: /^.{0,255}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
                aassPicType: [{
                    required: true,
                    message: "选项不能为空",
                    trigger: "change"
                }, ],
                // 商标申请号/注册号
                loginNum: [{
                    required: true,
                    message: "选项不能为空",
                    trigger: "change"
                }, {
                    pattern: /^[A-Za-z0-9]{0,30}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
                // 原转让申请号
                originNum: [{
                    required: true,
                    message: "选项不能为空",
                    trigger: "change"
                }, {
                    pattern: /^[A-Za-z0-9]{0,30}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
                radio: [{
                    required: true,
                    message: "选项不能为空",
                    trigger: "change"
                }],
                reason: [{
                    required: true,
                    message: "选项不能为空",
                    trigger: "change"
                }, {
                    pattern: /^.{0,255}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
                imgAddr: [{ //上传图片
                    required: true,
                    message: "选项不能为空",
                    trigger: "change"
                }, ],
                // 受让人名称
                nameValue: [{
                        required: true,
                        message: "选项不能为空",
                        trigger: "change"
                    },
                    {
                        pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
                        message: "请输入正确的名称",
                        trigger: "blur",
                    }, {
                        pattern: /^.{0,255}$/,
                        message: "您的输入太长",
                        trigger: "blur",
                    },
                ],
                // 转让人名称
                nameValues: [{
                        required: true,
                        message: "选项不能为空",
                        trigger: "change"
                    },
                    {
                        pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
                        message: "请输入正确的名称",
                        trigger: "blur",
                    }, {
                        pattern: /^.{0,255}$/,
                        message: "您的输入太长",
                        trigger: "blur",
                    },
                ],

                // 受让人地址
                siteValue: [{
                        required: true,
                        message: "选项不能为空",
                        trigger: "change"
                    },
                    {
                        pattern: /^.{2,50}$/,
                        message: "您的输地址长度不符合要求",
                        trigger: "blur",
                    }, {
                        pattern: /^.{0,255}$/,
                        message: "您的输入太长",
                        trigger: "blur",
                    },
                ],
                // 转让人地址
                siteValues: [{
                        required: true,
                        message: "选项不能为空",
                        trigger: "change"
                    },
                    {
                        pattern: /^.{2,50}$/,
                        message: "您的输地址长度不符合要求",
                        trigger: "blur",
                    }, {
                        pattern: /^.{0,255}$/,
                        message: "您的输入太长",
                        trigger: "blur",
                    },
                ],

                englishValues: [{
                    pattern: /^.{0,255}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
                englishSiteValues: [{
                    pattern: /^.{0,255}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
                englishValue: [{
                    pattern: /^.{0,255}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
                englishSiteValue: [{
                    pattern: /^.{0,255}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],

            },
            appendZ: [], //其他转让人信息
            appendS: [], //其他受让人信息
            alterAppendZ: [],
            alterAppendS: []
        };
    },
    mounted() {
        //身份列表
        this.identityOptions = this.mconfig.options;

        this.$store.state.alterData.append && (this.alterAppendZ = this.$store.state.alterData.append.length ? this.$store.state.alterData.append : []);
        this.$store.state.alterData.append2 && (this.alterAppendS = this.$store.state.alterData.append2.length ? this.$store.state.alterData.append2 : []);

        this.isUpdate = this.$store.state.stateJdg
        //获取从存储在路由中的classId
        this.classId = this.$route.query.id;
        //获取网点列表
        this.$http.get("/trademark/system/dept/findDept").then((res) => {
            this.options = res.data.data;
        });
        if (this.isUpdate) {
            this.uploadImg = true
            this.showImg = true
            let {
                contacts,
                proxyOrganizationName,
                transferApplicantNum,
                registNum,
                reasonsWithdrawal,
                isShare,
                transfereesName,
                transfereesNameEn,
                transfereesAddr,
                transfereesAddrEn,
                transferorName,
                transferorAddr,
                otherfile,
                transferorNameCh,
                transferorNameEn,
                transferorAddrCh,
                transferorAddrEn,
                phoneNum,
                branchNetworkId, //网点
                transfereesType,
                businessLicense, //营业执照
                idaddress, //身份证照
                qrfile
            } = Object.assign(this.$store.state.alterData.data, this.$store.state.alterData.public);
            console.log(Object.assign(this.$store.state.alterData.data, this.$store.state.alterData.public));
            this.ruleForm.nameValues = transferorName;
            this.ruleForm.siteValues = transferorAddr;
            this.ruleForm.organization = proxyOrganizationName;
            this.ruleForm.loginNum = registNum;
            this.ruleForm.originNum = transferApplicantNum;
            this.ruleForm.reason = reasonsWithdrawal;
            this.ruleForm.radio = isShare;
            this.ruleForm.nameValue = transfereesName;
            this.ruleForm.englishValue = transfereesNameEn;
            this.ruleForm.siteValue = transfereesAddr;
            this.ruleForm.englishSiteValue = transfereesAddrEn;
            this.$set(this.ruleForm, 'phone', phoneNum);
            this.ruleForm.englishSiteValues = transferorAddrEn;
            this.ruleForm.englishValues = transferorNameEn;
            this.ruleForm.common = this.$store.state.alterData.append;
            this.ruleForm.commons = this.$store.state.alterData.append2;
            this.ruleForm.imgAddr = this.mconfig.host + qrfile;
            this.ruleForm.value = Number(branchNetworkId);
            this.ruleForm["dengjichenluofile"] = JSON.parse(otherfile);

            (this.ruleForm.BusinessLicenseAddr = businessLicense); //营业照
            if (transfereesType == 9) {
                this.ruleForm.BusinessLicenseAddr == "";
                this.ruleForm.OtherAddr = businessLicense; //其他
            }
            (this.ruleForm.IDCAddr = idaddress); //身份证
            (this.ruleForm.aassPicType = Number(transfereesType));
            console.log(transfereesType);
        }
    },

    components: {
        upfile,
        both,
        examimg,
        uploads
    },

    methods: {
        backUrl(url,file_config){
            this.ruleForm[file_config["field"]].push(url)
        },
        delUrl(index,file_config){
            this.ruleForm[file_config["field"]].splice(index,1)
            this.$set(this.ruleForm,file_config["field"],this.ruleForm[file_config["field"]])
        },
        //身份证双面
        backCardImage(files) {
          let data = new FormData();
          this.ruleForm.picdbcard = files;
          this.changedIDC = true;
          let config = {
            headers: {
              "Content-Type": "multipart/form-data",
            }
          };
          data.append(
              "picdbcard",
              this.ruleForm.picdbcard[0] ? this.ruleForm.picdbcard[0] : ""
          );
          data.append("picType", this.ruleForm.aassPicType==1?1:0);
          this.$http.post("/trademark/distinguish/picdis", data, config)
              .then(res =>{
                  let item = res.data.data;
                  if (item.picpath != ""){
                    this.ruleForm.iddbimage = item.picpath;
                  }
              })
        },

        SureImg(rule, value, callback) {
            if (this.ruleForm.qrfile || this.ruleForm.imgAddr) {
                callback();
            } else {
                callback(new Error("请上传确认书！"));
            }
        },

        getBothZ(value) { //共有人数据
            this.appendZ = value;
        },
        getBothS(value) { //共有人数据
            this.appendS = value;
        },

        //营业执照
        setBusinessLicense(files) {
            this.ruleForm.BusinessLicense = files[0];
            this.changedBusinessLicense = true;

            function fn(res) {
                try {
                    var data = res.data.data;
                    this.ruleForm.BusinessLicenseAddr = data.popath; //issue 识别失败就清除图片
                    if (this.ruleForm.aassPicType == 0 || !(this.ruleForm.aassNameCn)) { //身份证信息优先
                        this.ruleForm.nameValue = data.po.name;
                        this.ruleForm.siteValue = data.po.address;
                    }
                    this.SussImg("BusinessLicense");
                } catch (error) {
                    this.FailureImg("BusinessLicense");
                }
            }
            this.RecognitionImg(0, fn, "BusinessLicense");
        },
        //营业执照
        setOther(files) {
            this.ruleForm.Other = files[0];
            this.changedOther = true;

            function fn(res) {
                try {
                    var data = res.data.data;
                    this.ruleForm.OtherAddr = data.popath; //issue 识别失败就清除图片
                    this.ruleForm.nameValue = "";
                    this.ruleForm.siteValue = "";
                    this.SussImg("Other");
                } catch (error) {
                    this.FailureImg("Other");
                }
            }
            this.RecognitionImg(9, fn, "Other");
        },

        //身份证
        setIDC(files) {
            this.ruleForm.IDC = files[0];
            this.changedIDC = true;

            function fn(res) {
                try {
                    var data = res.data.data;
                    this.ruleForm.IDCAddr = data.id_card
                    this.ruleForm.nameValue = data.pic.name
                    this.ruleForm.siteValue = data.pic.address
                    this.SussImg("IDC");
                } catch (error) {
                    this.FailureImg("IDC");
                }
            }
            this.RecognitionImg(1, fn, "IDC");
        },

        FailureImg(img) { //图片上传失败或识别错误
            this.open1("图片上传出错!", "error"); //提示
            this.$set(this["ruleForm"], img + "Addr", "");
            return "";
        },

        SussImg(img) { //图片上传成功
            this.open1("图片上传成功!"); //提示
            return "";
        },

        RecognitionImg(type, fn, name) { //请求
            if (!this.ruleForm[name]) {
                this.$set(this["ruleForm"], name + "Addr", "");
                return;
            }
            let _this = this;
            let data = new FormData();
            var url = "/trademark/distinguish/picdis";
            if (type == 0) { //营业执照
                data.append("picType", 0);
                data.append("picbussi", _this.ruleForm.BusinessLicense);
            } else if (type == 1) { //身份证等
                data.append("picType", 1);
                data.append("picidcard", _this.ruleForm.IDC);
            } else {
                data.append("picType", 0);
                data.append("picbussi", _this.ruleForm.Other);
            }

            this["load" + name] = true; //加载中
            this.$http({
                method: "post",
                headers: {
                    "Content-Type": "multipart/form-data",
                },
                url: url,
                data: data,
            }).then(res => {
                this["load" + name] = false;
                fn.call(_this, res);
            }).catch((err) => {
                this["load" + name] = false; //加载不显示
                fn.call(_this, {});
            });
            return;

        },

        // 提交并审核验证
        submitCheck(formName) {
            this.$refs[formName].validate((valid) => { //表单填写
                if (!valid) {
                    this.open1("存在错误的格式填写！", "error");
                    return;
                }
                if (this.uploadImg == false) { //确认书
                    this.open1("请上传商标确认书！", "error");
                    return;
                }
                if (this.ruleForm.aassPicType == 0 && !this.ruleForm.BusinessLicenseAddr) { //确认书
                    this.open1("请上传受让人营业照！", "error");
                    return;
                }
                if (this.ruleForm.aassPicType > 1 && !this.ruleForm.OtherAddr) { //其他证件
                    console.log(this.ruleForm.aassPicType, !this.ruleForm.OtherAddr);
                    this.open1("请上传有效证件！", "error");
                    return;
                }
                if (this.ruleForm.aassPicType == 1 && !this.ruleForm.IDCAddr) { //确认书
                    this.open1("请上传身份证照！", "error");
                    return;
                }

                if (this.ruleForm.radio == 0) { //否
                    console.log(3);
                    this.dialogVisible = true;
                    return;
                }
                if (this.appendS.length == 0 && this.appendZ.length == 0) { //没填共有人
                    this.isAdd = true;
                    this.open1("请填写共有人信息！", "error");
                    var _this = this;
                    var t = setTimeout(_ => {
                        _this.isAdd = false;
                        clearTimeout(t)
                    }, 500)
                    return;
                }
                if (true) { //显示
                    this.dialogVisible = true;
                }
            });
        },

        setSure(files) { //上传确认书
            if (files.length > 0) {
                this.uploadImg = true
                this.ruleForm.qrfile = files[0]
                this.ruleForm.imgAddr = "";
                this.showImg = false
            } else {
                this.uploadImg = false
                this.ruleForm.qrfile = ""
                this.showImg = true
            }
        },
        //返回上一步
        outStep() {
            this.$emit("wp", 1, "请填写申请业务信息");
        },
        //提示模板
        open1(msg, types = "success") {
            this.$message({
                message: msg,
                type: types,
            });
        },

        //表单提交事件
        submitForm(formName) {
            let _this = this;
            if (this.ruleForm.value != "") {
                console.log(this.ruleForm);
                //每次提交重新生成新的FormData用于储存新的数据
                this.formData = new FormData();
                this.dialogVisible = false;
                //获取vuex中保存的步骤二中的数据

                /*********************************************公共数据开始*********************************************/

                // let {
                //   name, // 申请人姓名
                //   englishName, // (选填)申请人姓名(英文)
                //   number, // 营业执照编号
                //   person_type, // 证件类型
                //   site, // (选填)申请人姓名(英文) 
                //   phone, // 电话号码
                //   postal, // 邮政编码
                //   nationality, // 申请人国籍/地区
                //   englishSite, // 英文地址信息
                // } = this.$store.state.storeDatas;
                // //将两个数组中的内容合并到一起发送\
                // this.ruleForm.commonArr = this.ruleForm.commonArr.concat(
                //   this.ruleForm.commonArrs
                // );
                // //向FormData中添加数据

                // this.formData.append("idcardimg",this.$store.state.id_card_info?this.$store.state.id_card_info.id_card:''); //身份证正反面地址
                // this.formData.append("idcardface",this.$store.state.id_card_info?this.$store.state.id_card_info.url:''); //身份证正面地址
                // this.formData.append("busimg",this.$store.state.company_card_info?this.$store.state.company_card_info.url:''); //营业执照地址
                // this.formData.append("optype", 1); // 操作类型 0 代表保存 1 代表保存提交
                // this.formData.append("postcode", postal); // 邮政编码
                // this.formData.append("appliType", this.$store.state.picType); // 申请人类型
                // this.formData.append("phone", phone); // 邮政编码

                let arr = this.$store.getters.getRuleForm
                for (let key in arr) {
                    this.formData.append(key, arr[key])
                }

                /*********************************************公共数据结束*********************************************/

                /*********************************************需要提交的数据开始***************************************/
                this.formData.append("transferorAddr", this.ruleForm.siteValues); // 转让人地址
                this.formData.append("transferorAddrEn", this.ruleForm.englishSiteValues); // 转让人地址(英文)
                this.formData.append("transferorName", this.ruleForm.nameValues); // 转让人名字
                this.formData.append("transferorNameEn", this.ruleForm.englishValues); // 转让人名字(英文)
                this.formData.append("branchNetworkId", Number(this.ruleForm.value)); // 网点编号
                this.formData.append("proxyOrganizationName", this.ruleForm.organization); // 代理机构名称
                this.formData.append("registNum", this.ruleForm.loginNum); // 商标申请号/注册号
                this.formData.append("transferApplicantNum", this.ruleForm.originNum); // 原转让申请号
                this.formData.append("reasonsWithdrawal", this.ruleForm.reason); // 撤回理由
                this.formData.append("isShare", this.ruleForm.radio); // 是否共有商标
                this.formData.append("transfereesName", this.ruleForm.nameValue); // 受让人名称
                this.formData.append("transfereesNameEn", this.ruleForm.englishValue); // 受让人名称(英文)
                this.formData.append("transfereesAddr", this.ruleForm.siteValue); // 受让人地址
                this.formData.append("transfereesAddrEn", this.ruleForm.englishSiteValue); // 受让人地址(英文)
                this.formData.append("classId", this.classId); // 申请业务类型
                this.formData.append("otherfile", JSON.stringify(this.ruleForm.dengjichenluofile));

                this.formData.append("transfereesType", this.ruleForm.aassPicType);
                this.formData.append("businessLicense", this.ruleForm.BusinessLicenseAddr ? this.ruleForm.BusinessLicenseAddr : this.ruleForm.OtherAddr);
                this.formData.append("IDAddress", this.ruleForm.IDCAddr ? this.ruleForm.IDCAddr : "");
                this.formData.append("iddbimage", this.ruleForm.iddbimage ? this.ruleForm.iddbimage : "");

                if (this.ruleForm.radio == 1) { //是共有人
                    let proAppends = [];
                    let proAppends2 = [];
                    this.appendZ.forEach((item) => { //转让人数组type为1
                        proAppends.push(item);
                    });
                    this.appendS.forEach((item) => { //受让人数组type为2
                        proAppends2.push(item);
                    });
                    this.formData.append("proAppends", JSON.stringify(proAppends));
                    this.formData.append("proAppends2", JSON.stringify(proAppends2));
                } else {
                    this.formData.append("proAppends", {});
                }
                if (this.$store.state.stateJdg) {
                    this.formData.append("id", this.$store.state.storeId); // 获取当前业务的id
                    this.formData.append("modelId", this.$store.state.alterData.public.modelId); // 获取当前业务的modleId
                }
                if (this.showImg) {
                    this.formData.append("qrfiles", {}); // 如果没有修改, 则使用之前的qrfile
                } else {
                    this.formData.append("qrfiles", this.ruleForm.qrfile); // 商标确认书
                }

                if (this.isUpdate) {
                    this.formData.append("modelId", this.$store.state.alterData.public.modelId)
                }

                /*********************************************需要提交的数据结束**************************************/

                //配置请求头
                var config = {
                    header: {
                        "Content-Type": "multipart/form-data",
                    },
                };
                // axios向后端发送数据
                this.$http
                    .post(this.isUpdate ? "/trademark/proWta/modifyNoCommit" : "/trademark/proWta/firstSubmit", this.formData, config)
                    .then(function (response) {
                        //若状态码不为200则不跳转
                        ////console.log(response)
                        if (response.data.code != 200) {
                            //                _this.open1("提交失败", "error");
                            return;
                        }

                        _this.centerDialogVisible = true;
                    })
                    .catch(function (error) {});
            } else {
                this.open1("请选择网点编号", "error")
                return false;
            }
        },
        //跳转函数
        skip() {
            this.centerDialogVisible = false;
            this.open1("操作成功");
            this.$router.push({
                path: "/business/myBusiness/auditing",
            });
        },
        changedImg() {
            //修改的时候被改动
            this.changedBusinessLicense = true;

            //修改的时候被改动
            this.changedOther = true;

            //修改的时候被改动
            this.changedIDC = true;
        }

    },

    computed: {
        BusinessLicenseLink() {
            if (this.ruleForm.BusinessLicenseAddr) {
                return this.mconfig.host + this.ruleForm.BusinessLicenseAddr
            } else {
                return "";
            }
        },
        OtherLink() {
            if (this.ruleForm.OtherAddr) {
                return this.mconfig.host + this.ruleForm.OtherAddr
            } else {
                return "";
            }
        },
        IDCLink() {
            if (this.ruleForm.IDCAddr) {
                return this.mconfig.host + this.ruleForm.IDCAddr
            } else {
                return "";
            }
        },
        showSureImg() {
            if (this.ruleForm.imgAddr) {
                return true;
            } else {
                return false;
            }
        }

    }
};
</script>

<style lang="less" scoped>
.btns {
    display: flex;
    justify-content: center;

    .el-button {
        margin: 0 20px;
    }
}

.box2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 241px;
    // margin-top: 100px;
    width: 100%;
    min-height: 800px;

    .tle {
        font-size: 24px;
        color: #000;
    }

    .el-form {
        width: 100%;

        .el-input {
            width: 80%;
        }
    }

    .must,
    .select {
        display: flex;
        position: relative;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 0 30px;
        margin-bottom: 80px;
        width: 100%;
        // border: 1px solid #bbbbbb;
        border-radius: 10px;

        .el-form-item {
            width: 680px;
        }

        .inline {
            display: flex;

            .el-form-item {
                margin: 0;
                width: 290px !important;
            }
        }
    }

    .must {
        margin-bottom: 20px;
    }

    .line {
        width: 55vw;
        max-width: 1200px;
        margin: 20px auto;
        margin-left: 217px;
        height: 1px;
        min-width: 630px;
        border-top: 1px dashed #d9d9d9;
    }

    .imgHint {
        margin: 5px;
        font-size: 12px;
        line-height: 17px;
        color: #f5222d;
    }

    .affirm {
        font-size: 12px;
        color: #a0a3a5;

        a {
            text-decoration: none;
            color: #3685ff;
        }
    }

    .input {
        width: 60px;
    }

    .upload {
        margin: 20px 0;
    }

    .type-number {
        width: 250px;
    }

    .informs {
        position: absolute;
        width: 500px;
        font-size: 12px;
        color: #a0a3a5;

        a {
            text-decoration: none;
            color: #3685ff;
        }
    }

    .notice {
        color: #f00;
        font-size: 12px;
    }

    .tle {
        list-style: none;
        margin: 40px 0 20px;
        font-size: 24px;

        &~.tle {
            color: #bbb;
        }
    }

    .hint {
        color: #F96900;
        background-color: #fff;

        .el-form-item__label {
            width: 150px;
        }

        img {
            width: 20px;
        }
    }

    .el-steps {
        width: 70%;
        height: 200px;
    }

    .el-button {
        //display: block;
        display: inline;
        margin: 0 20px;
        // background-color: #67c23a !important;
        // border-color: #67c23a !important;
    }

    .common .el-button {
        background-color: #fff !important;
        border-color: #bbb !important;
    }
}

.dialog-footer {
    display: flex;
    justify-content: space-between;
    color: #fff;

    .lan {
        background-color: #2c9dfc !important;
        border-color: #2c9dfc !important;
    }
}

.dialog /deep/.el-form-item__label {
    width: 100px !important;
}

.dialog /deep/.el-form-item__content {
  margin-left: 100px !important;
  display: flex;
  justify-content: left;
}

.dialog /deep/.el-input {
    width: 250px;
}

.el-checkbox-group {
    line-height: 14px;
}

// .is-checked/deep/.el-radio__inner,
.is-checked/deep/.el-checkbox__inner {
    border-color: #999999;
    background: #999999;
}

// .el-radio/deep/.el-radio__inner:hover {
//   border-color: #999999 !important;
// }
.is-checked/deep/.el-radio__label,
.is-checked/deep/.el-checkbox__label {
    color: #333;
}

.is-focus .el-checkbox__inner {
    border-color: #999999 !important;
}

.el-checkbox/deep/.el-checkbox__inner:hover {
    border-color: #999999 !important;
}

.el-step__head.is-process {
    border-color: #f96900;
    color: #f96900 !important;
}

.hintMsg {
    /deep/.el-dialog__header {
        display: flex;
        justify-content: center;
        font-weight: bold;
    }

    .dialog-footer {
        justify-content: center;

        .el-button {
            border-color: #2c9dfc !important;
            background: #2c9dfc !important;
        }
    }
}

.inform {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 80%;
    width: 300px;
    height: 32px;
    color: #F96900;
    font-size: 10px;
    line-height: 14px;

    img {
        margin: 11px;
    }

    .content {
        display: flex;
        flex-direction: column;

        .ts {
            text-indent: 3em;
        }
    }
}

.btn-group-com {
    padding: 0 0 24px 180px;
}

//转让人收益人动画提示
.tiprotate {
    animation: rotate 0.5s 2;
    transform-origin: 20% 25%;
}

@keyframes rotate {

    0%,
    100% {
        transform: rotate(0deg)
    }

    25%,
    75% {
        transform: rotate(-3deg)
    }

    50% {
        transform: rotate(3deg)
    }
}

//fiexed dialog 0902 

/deep/ .el-dialog.el-dialog--center /deep/ {
    .el-dialog__header {
        padding: 0;
    }

    .el-dialog__body {
        padding: 20px;
    }

    .hint {
        color: #F96900;
        background-color: #fff;
        padding: 0;
        padding-bottom: 20px;
    }

    .el-button {
        margin: 0;
    }

    .el-form-item__label {
        width: 86px !important;
    }
}

//fixed 0904
/deep/ .el-loading-spinner {
    text-align: left;
    padding-left: 54px;
}

.upload /deep/ .upload-img {
    width: 150px;
}
.exam-img{
  position: absolute;
  top: 0;
  left: 465px;
}
.img-inform{
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    transform: translate(-50%,-50%);
  }
  span{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      white-space: nowrap;
      margin-left: -100px;
      width: 50px;
      color: #f96900;
  }
}
</style>
